<template>
  <div class="page-table-container">
    <div class="page-search-container" v-show="searchEnable">
      <div class="search-container">
        <AForm layout="inline" :model="searchState" @finish="onSearch">
          <ASpaceCompact>
            <ASelect
              v-if="!props.searchSimple"
              style="width: 120px"
              :value="searchType"
              :options="props.searchOptions"
              @change="setSearchType"
            ></ASelect>
            <AFormItem :name="searchType">
              <AInput v-model:value="searchState[searchType]" />
            </AFormItem>
            <AButton :icon="createVNode(SearchOutlined)" html-type="submit"></AButton>
          </ASpaceCompact>
        </AForm>
        <ASpace>
          <AButton v-show="props.searchProEnable" type="link" @click="() => setCollapse(!collapse)">
            <span>高级搜索</span>
            <DownOutlined class="collapse-target-icon" :collapse="collapse" />
          </AButton>
          <slot name="searchRight"></slot>
        </ASpace>
      </div>
      <RCollapse v-show="props.searchProEnable" :collapse="collapse">
        <slot name="searchCollapse"></slot>
      </RCollapse>
    </div>
    <div v-show="$slots.operate" class="page-operate-container">
      <slot name="operate"></slot>
    </div>
    <div class="page-body-container">
      <ATablePro v-bind="$attrs">
        <template #bodyCell="{ column, record, index }">
          <slot name="bodyCell" :column="column" :record="record" :index="index"></slot>
        </template>
        <template #bodyActionCell="{ record }">
          <slot name="bodyActionCell" :record="record"></slot>
        </template>
      </ATablePro>
    </div>
  </div>
</template>

<script setup>
import { createVNode, reactive } from 'vue';
import { ATablePro } from '@/components/iteration';
import { RCollapse } from '@/components/common';
import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue';
import { useState } from '@/hooks';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  searchOptions: {
    type: Array,
    default: () => [{ label: '综合搜索', value: 'keyword', placeholder: '综合搜索' }]
  },
  searchEnable: { type: Boolean, default: true },
  searchSimple: { type: Boolean, default: false },
  searchProEnable: { type: Boolean, default: true }
});

const emit = defineEmits(['search']);
const [collapse, setCollapse] = useState(false);
const [searchType, setSearchType] = useState('keyword');
const searchState = reactive({});

/**
 * 搜索
 *
 * @param values 搜索值
 */
const onSearch = (values) => {
  if (props.searchSimple) {
    emit('search', Object.values(values)[0]);
  } else {
    emit('search', values);
  }
};
</script>

<style lang="scss" scoped>
.page-table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  color: var(--text-color);
  background-color: var(--bg-color);

  .page-search-container {
    width: 100%;

    .search-container {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .collapse-target-icon {
      transform: rotate(0deg);
      transform-origin: center center;
      transition: transform 0.3s;

      &[collapse='true'] {
        transform: rotate(180deg);
      }
    }
  }

  .page-operate-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .page-body-container {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
  }
}

.ant-form .ant-space-compact .ant-form-item {
  margin-inline-end: -1px;
}
</style>
